<template>
  <div id="tiqianpiMenu">
    <div class="tiqianpiSelect">
      <el-select
        v-model="selectValue"
        @change="handleChange"
        size="large"
        style="width: 300px"
        class="my-input"
      >
        <el-option
          v-for="item in options"
          :key="item.year"
          :label="item.year + '年招生计划'"
          :value="item.year"
        />
      </el-select>
    </div>
    <el-scrollbar>
      <div class="tree-box">
        <el-tree
          style="max-width: 600px; padding-bottom: 180px"
          empty-text="暂无数据"
          highlight-current
          :data="treeData"
          :props="defaultProps"
          accordion
          ref="deptRef"
          node-key="rowIndex"
          @node-click="handleNodeClick"
          :current-node-key="currentNodeKey"
        />
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { getSchoolPlanFilter } from '@/api/scoreline/scoreline';
import { useStore } from 'vuex';

const store = useStore();
const emits = defineEmits(['handleTreeData', 'updateBatchPlan']);
const selectValue = ref('');
const checkValue = ref('');
const deptRef = ref(null);
const currentNodeKey = ref('');
const { treeData } = defineProps({
  treeData: {
    type: Array,
    default: () => [],
  },
});
const options = ref([]);

fecthSchoolPlanFilter();
function fecthSchoolPlanFilter() {
  let data = {
    pid: store.getters.user.userInfo.pid,
  };
  getSchoolPlanFilter(data).then((res) => {
    options.value = res.data.data.years;
    selectValue.value = options.value[0].year;
  });
}

const handleChange = (val) => {
  selectValue.value = `${val}年招生计划`;
  checkValue.value = val;
  emits('handleTreeData', checkValue.value);
};
const defaultProps = {
  children: 'levels',
  label: 'name',
};
const handleNodeClick = (data, node) => {
  let type = 1;
  emits('updateBatchPlan', data, node.parent.data.name, type);
};

// 设置当前节点
const setCurrentNodeKey = (val) => {
  // 按 > 符号分割字符串，获取最后一项（目标节点名称）
  const targetName = val.split('>').pop().trim();

  // 查找匹配的节点
  const findRowIndex = (data, target) => {
    for (let node of data) {
      // 如果当前节点名称匹配目标名称，返回其 rowIndex
      if (node.name === target) {
        return node.rowIndex;
      }
      if (node.levels) {
        // 递归查找子节点
        const result = findRowIndex(node.levels, target);
        if (result) return result;
      }
    }
    return null;
  };

  // 查找匹配的节点
  const rowIndex = findRowIndex(treeData, targetName);
  if (rowIndex !== null) {
    // 设置当前节点
    currentNodeKey.value = rowIndex;
    deptRef.value.setCheckedKeys([rowIndex]); // 使用 rowIndex 设置选中节点
  } else {
    console.warn('未找到匹配的节点:', targetName);
  }
};

defineExpose({
  setCurrentNodeKey,
});
</script>

<style lang="scss" scoped>
#tiqianpiMenu {
  width: 302px;
  position: fixed;
  top: 130px;
  // z-index: 999;
  left: calc(50vw - 590px);
  border: 1px solid #ebeef5;
}
.tree-box {
  height: 100vh;
}
</style>
<style>
.tiqianpiSelect .el-select--large .el-select__wrapper {
  border-radius: 0px;
  box-shadow: none;
  border-bottom: 1px solid #ebeef5;
}
/* /设置选择框的鼠标经过样式 */
.tiqianpiSelect .el-select .el-select__wrapper:hover {
  box-shadow: none !important;
}
/* 更改placeholder的颜色 */
.tiqianpiSelect .el-select .el-select__placeholder {
  color: black;
  font-weight: bold;
  font-size: 16px;
}
</style>
